<template>
	<div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits,toRaw } from "vue";

// 接收参数
const props = defineProps({
housingSupplyStatsData: {
type: Object,
default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['barPiemagnify'])
var attrs = props.housingSupplyStatsData.attrs;
var datas = props.housingSupplyStatsData.datas;


// 字体自适应方法
const pxToRem = (px: number) => {
const scale = document.documentElement.clientWidth / 1920;
return Math.round(px * Math.min(scale, 3));
};


const getEchart = () => {
if (echartDom.value) {
myChart.value = echarts.init(echartDom.value);
var series = [];
for (var i = 0; i < datas.length; i++) {
    var item = {
        name:attrs[i].name,
        type: 'liquidFill',
        radius: '70%',
        center: [attrs[i].center_l, '50%'],
        data: datas[i],
        backgroundStyle: {
            color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(4,33,77, 0)'
                }, {
                    offset: 0.5,
                    color: 'rgba(4,33,77, .5)'
                }, {
                    offset: 0,
                    color: 'rgba(4,33,77, 1)'
                }],
                globalCoord: false
            },
        },
        outline: {
            borderDistance: 5,
            itemStyle: {
                borderWidth: 1,
                borderColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(54,98,236, 1)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(54,98,236, .5)'
                    }, {
                        offset: 1,
                        color: 'rgba(54,98,236, 1)'
                    }],
                    globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#fff',
            }
        },
        color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                        offset: 0,
                        color: 'rgba(54,98,236, 1)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(54,98,236, .5)'
                    }, {
                        offset: 1,
                        color: 'rgba(54,98,236, 1)'
                    }],
            globalCoord: false
        }],
        label: {
            normal: { //此处没有生效，本地生效
                textStyle: {
                    fontSize: pxToRem(16),
                    color: '#e6e6e6',
                },
                // formatter: function(params){
                //     return `${(params.value * 100).toFixed(0)}%\n ${params.value}`
                // }

            },
            position: 'top'
        }
    }
    series.push(item);
}
const title = [
        {
            text:`已办:${attrs[0].value}`,
            x: attrs[0].value == 0 ? pxToRem(57) : pxToRem(52),
            y: pxToRem(105),
            textStyle: {
                fontSize: pxToRem(16),
                fontWeight: '100',
                color: '#fff',
                lineHeight: pxToRem(6),
                textAlign: 'center',
            },
        },
        {
            text:`在办:${attrs[1].value}`,
            x: attrs[1].value == 0 ? pxToRem(252) : pxToRem(247),
            y: pxToRem(105),
            textStyle: {
                fontSize: pxToRem(16),
                fontWeight: '100',
                color: '#fff',
                lineHeight: pxToRem(6),
                textAlign: 'center',
            },
        },
        {
            text:`代办:${attrs[2].value}`,
            x: attrs[2].value == 0 ? pxToRem(453) : pxToRem(440),
            y: pxToRem(105),
            textStyle: {
                fontSize: pxToRem(16),
                fontWeight: '100',
                color: '#fff',
                lineHeight: pxToRem(6),
                textAlign: 'center',
            },
        },
    ]
const option = {
    title: title,
    series: series
};
myChart.value.setOption(option);
myChart.value.on("click", (params) => {
	emit('barPiemagnify',props.housingSupplyStatsData)
});
}
};
const updateChart = () => {
if (myChart.value) {
myChart.value.dispose(); // 销毁旧图表实例
}
getEchart();
};

watchEffect(() => {
    attrs = props.housingSupplyStatsData.attrs;
    datas = props.housingSupplyStatsData.datas;
    updateChart();
});
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
}
});
});
</script>

<style scoped lang="less">
.line_box{
	width: 100%;
	height: 100%;
}
</style>